import React from 'react';
import { useAuth } from "context/auth-context";
import { Form, Button, Input, Card } from 'antd';
import { LongButton } from 'unauthenticated-app';
import { useAsync } from 'views/utils/use-async';

export const LoginView = ({onError}: {onError:(error:Error) => void}) => {
    const { login } = useAuth()
    const { run, isLoading } = useAsync(undefined,{throwOnError:true})
    
    const handleSubmit = async (values: {username:string, password:string}) => {
        try {
           await run(login(values))
        } catch (e) {
            onError(e as Error)
        }
    }

    return  <Form onFinish={handleSubmit}>
                <Form.Item
                    name={'username'}
                    rules={[{ required: true, message: '请输入用户名!' }]}>
                    <Input placeholder='用户名'/>
                </Form.Item>
                <Form.Item
                    name={'password'}
                    rules={[{ required: true, message: '请输入密码!' }]}>
                    <Input.Password placeholder='密码' />
                </Form.Item>
                <Form.Item>
                    <LongButton loading={isLoading} type="primary" htmlType="submit">登录</LongButton>
                </Form.Item>
            </Form>
}